<script setup>
import { ref, onMounted } from "vue";
import { useUserStore } from "@/stores";
import { GoldMedal, TrophyBase, Paperclip } from "@element-plus/icons-vue";

const userStore = useUserStore();
function generateMockPhoneNumber() {
  // 运营商代码范围
  const operatorCodes = ["13", "14", "15", "16", "17", "18", "19"];
  // 随机选择一个运营商代码
  const operatorCode =
    operatorCodes[Math.floor(Math.random() * operatorCodes.length)];

  // 地区代码随机生成，确保是4位数
  const areaCode = String(Math.floor(Math.random() * 9000) + 1000).padStart(
    4,
    "0"
  );
  // 用户号码随机生成，确保是4位数
  const userNumber = String(Math.floor(Math.random() * 9000) + 1000).padStart(
    4,
    "0"
  );

  // 拼接得到模拟手机号
  const mockPhoneNumber = operatorCode + areaCode + userNumber;
  return mockPhoneNumber;
}
</script>
<template>
  <div class="profile-card">
    <img :src="userStore.user.head_url" alt="个人头像" class="profile-pic" />
    <div class="profile-info">
      <h2>{{ userStore.user.name }}</h2>
      <p>{{ userStore.user.description }}</p>
      <p>邮箱: {{ userStore.user.username }}@163.com</p>
      <p>电话: {{ generateMockPhoneNumber() }}</p>
      <div class="social-media">
        <a href="#">
          <el-icon><GoldMedal /></el-icon>
        </a>
        <a href="#">
          <el-icon><TrophyBase /></el-icon>
        </a>
        <a href="#"
          ><el-icon><Paperclip /></el-icon
        ></a>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.profile-card {
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: 0.3s;
  height: 311px;
  &:hover {
    transform: scale(1.01) translateY(-5px); /* 缩放并轻微上移 */
    box-shadow: 0 0px 20px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  }
}

.profile-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.profile-pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #f0f0f0;
}

.profile-info h2 {
  margin-bottom: 10px;
}

.profile-info p {
  margin-bottom: 5px;
}

.social-media {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.social-media a {
  color: #666;
  margin: 0 5px;
  font-size: 24px;
  transition: color 0.3s;
}

.social-media a:nth-of-type(1) :hover {
  color: #ffd700;
}
.social-media a:nth-of-type(2) :hover {
  color: #c0c0c0;
}
.social-media a:nth-of-type(3) :hover {
  color: #007bff;
}
</style>
